import React, { useState, useEffect } from 'react'
import { Input, Rate } from 'antd-mobile'
import { getHospital } from '../api/api'
import { useHistory } from "react-router-dom";

export default function Hospital() {
    const history = useHistory()
    const [list, setList] = useState([])
    const getHList = async () => {
        const data = await getHospital()
        setList(data.data.rows)
        console.log(list);

    }
    const toDetail = (id: any) => {
        history.push('/outpatient/hospitalList/detail/' + id)
    }
    useEffect(() => {

        getHList()

    }, [])


    if (list.length > 0) {
        return (
            <div>
                < Input className='H-inp' placeholder='请输入内容' clearable />
                <img style={{ 'width': '100%', 'marginTop': '40px' }} src="https://www.whuh.com/banner/weixintupian_20220124223039.jpg" />
                <div className='line'></div>
                <div className='theme'><strong>医院列表</strong></div>
                <div className='color'></div>
                {/* <div className='card'>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSISFB-RwaIH7WedGda8ndJZCfUo_n-QlzPLhUxjb5K7g&s" alt="" />
                    <div className='title'><h4>武汉人民医院</h4>
                        <span>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</span>
                        医院评级：<Rate style={{ '--star-size': '14px' }} readOnly value={4} />
                    </div>
                </div> */ }
                {list.map((item: any, index) => {
                    return (
                        <div className='card' onClick={() => { toDetail(item.id) }}>
                            <img src={'http://124.93.196.45:10001/' + item.imgUrl} alt="" />
                            <div className='title'><h4>{item.hospitalName}</h4>
                                <span>{item.brief.substring(3)}</span>
                                医院评级：<Rate style={{ '--star-size': '14px' }} readOnly value={item.level} />
                            </div>
                        </div>
                    )
                })}
            </div>
        )
    } else {
        return <div></div>
    }

}
